<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="../../../common/IplantCompent/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="../../../common/IplantCompent/themes/icon.css">
		<link rel="stylesheet" type="text/css" href="../../../common/IplantCompent/Demo/demo.css">
		<script src="../../../common/IplantCompent/jquery.min.js" type="text/javascript"></script>
		<script src="../../../system/screen/report/js/handlebars-v4.0.5.js"></script>
		<script src="../../../common/IplantCompent/jquery.easyui.min.js" type="text/javascript"></script>
		<script src="../../../business/IplantMobile/js/DataRequest.js" type="text/javascript"></script>
		<script src="../../../common/IplantCompent/jquery.lazyload.min.js" type="text/javascript"></script>
		<script type="text/javascript">
			function loadscript() {
				LazyLoad.js([
					"../../../common/IplantCommon/CommonUtil.js",
					"../../../system/screen/report/highcharts/code/highcharts.js",
					"../../../system/screen/report/highcharts/code/highcharts-3d.js",
					"../../../system/screen/report/highcharts/code/highcharts-more.js",
					"../../../system/screen/report/highcharts/code/modules/exporting.js",
					"../../../system/screen/report/highcharts/code/themes/dark-unica.js",
					"js/ScadaBigScreennew.js",
					"js/ScadaBigtop.js",
				]);
			};
			setTimeout(loadscript, 0);
		</script>
		<style type="text/css">
			.t-btn {
				width: 10px;
				height: 10px;
				border-radius: 50%;
				border: none;
				padding: 0;
				cursor: pointer;
				background-color: gray;
			}

			.t-btn.green {
				background-color: green;
			}

			.t-btn.red {
				background-color: red;
			}

			.t-btn.yewllo {
				background-color: yellow;
			}

			.sbMsg .etname {
				margin-right: 20px;
			}

			.boxs {
				padding-left: 10px;
				padding-top: 10px;
				padding-bottom: 10px;
				margin-bottom: 10px;
				position: relative;
				border: 2px solid transparent;
				z-index: 9;
				background-color: #081828;
				min-width: 350px;
			}

			.boxs-item {
				overflow: hidden;
				width: 100%;
				margin-top: 10px;
				display: flex;
			}

			.imgbox {
				/* float: left; */
				width: 100px;
				height: 100px;
				margin-right: 20px;
				margin-bottom: 10px;
				border-radius: 10px;
				overflow: hidden;
			}

			.imgbox img {
				width: 100%;
				display: block;
			}

			.namebar {
				/* float: left; */
				flex: 1;
			}

			.namebar p {
				margin: 0;
				padding: 0;
				line-height: 22px;
			}

			.namebar p span {
				display: inline-block;
				vertical-align: middle;
				width: 40%;
			}

			.namebar .error {
				padding-right: 20px;
				color: firebrick;
			}

			.error {
				display: none;
			}

			.hiddenScrollbar::-webkit-scrollbar {
				display: none;
			}
		</style>
	</head>
	<body style="padding: 0;margin: 0;">
		<div style="height:100%;width:100%;overflow: hidden;background:black;" class="easyui-layout" fit="true">
			<div
				style="position: relative;border:6px solid black;text-align: center;height:90px;font-size:23px;letter-spacing:4px;font-weight:600;color:white;background: #06101C;">
				<div style="height: 40px; line-height: 38px; position: absolute; top: 0; left: 20px;">
					<img src="../../../system/screen/report/image/log.png" style="vertical-align: middle;" width="30px"
						height="30px" /><span
						style="margin-left: 10px;font-size: 14px; font-family: 宋体; color: #A385E; font-weight: bold; color:#fff">神力索具智能制造平台</span>
				</div>
				<!-- SMT设备实时监控 -->
				<img src="../../../common/img/jiankong.png" width="610" height="63" style="padding-top:13px;">
			</div>


			<div style="height:100%;width:100%;overflow: hidden;background:black;" class="easyui-layout" fit="true">
				<div style="display: flex;justify-content: space-around;align-items: center;">
					<!-- 设备每天利用率 -->
					<div id="container"
						style="width: 48%; min-width:400px;height:400px;color:red; display: flex;align-items: center;justify-content: center;">
					</div>
					<!-- 设备每月利用率 -->
					<div id="container1"
						style="width: 48%;min-width:400px;height:400px;color:red; display: flex;align-items: center;justify-content: center;">
					</div>
				</div>

				<!-- 11台设备 -->
				<!-- <div style="border:4px solid #081828;width:83.7;background:#081828; "> -->
				<div style="border:4px solid #081828;width:83.7;height:calc(65vh - 90px);background:#081828; ">
					<div class="easyui-layout hiddenScrollbar" data-options="fit:true" id="p1"
						style="width:100%;height:120px;padding: 1px; 
				        border:0px solid #95B8E7 ; overflow-y: scroll;color:#30CCC4;display:flex;justify-content: flex-start;flex-wrap:wrap">
						<!-- 此处显示模板数据    -->
					</div>
				</div>
			</div>
		</div>

		<script type="text/x-handlebars-template" id='employeesInfoTemplate'>
			{{#each domData}}
				<div class="boxs" style="width:20%;min-height:180px;height: 120px; box-sizing: border-box;">
					<div class="sbMsg">
						<button style="background-color: rgba(241, 241, 241, 0.6);
							box-shadow: 0 5px 20px rgba(100, 196, 15, .5);
							border:0">{{NAME}}</button>
						<span class="etname">{{ET_NM}}</span>
					</div>
					<div class="boxs-item">
						<div class="imgbox">
							<img src="/iTaurus/common/img/{{ET_PL}}" />
							<!-- <img  src="/iTaurus/common/img/kanban.jpg" /> -->
						</div>
						<div class="namebar">
							<p><span>运行时间 : {{RUN_TIME}}分</span><span>加工时间 : {{MACHINING_TIME}}分</span></p>
							<p><span>稼动率 : {{jyl}}</span><span>用电量 : {{ELECTRICITY_CONSUMPTION}}</span></p>
							<p><span>本次产量: {{CURRENT_PRO_QTY}}</span><span>计划产量: {{PLAN_PRO_QTY}}</span></p>
							<!-- <p>累计产量: {{CUMULATIVE_PRO_QTY}}</p> -->
							<div class="error">
								{{ERROR_MESSAGER}}
							</div>
						</div>
					</div>

				</div>
			{{/each}}
		</script>
	</body>
</html>
